import React from "react";
import { Swiper } from 'react-vant';
import logo from './logo.svg'
class App1 extends React.Component {
  state = {
    url: "https://robohash.org/1231231",
    title: "我是大标题！！！！",
    price: 20,
    count: 1,

    urls: [
      "https://robohash.org/1",
      "https://robohash.org/2",
      "https://robohash.org/3",
      "https://robohash.org/4",
      logo,
    ]
  };
  handleAdd() {
    // 方案一： 
    // if(this.state.count >= 5) return ;

    this.setState({
      count: this.state.count + 1,
    });
  }
  handleSub() {
    // if(this.state.count <= 1) return ;
    this.setState({
      count: this.state.count - 1,
    });
  }
  render() {
    const { count, url, title, price, urls } = this.state;
    return (
      <div>
        <img src={url} alt="" />
        <h2>{title}</h2>
        <div>
          <span>{price}</span>

        {/* 方案二：  */}
          {/* <button disabled={count <= 1} onClick={() => this.handleSub()}>-</button>
          <span>{count}</span>
          <button disabled={count >=5} onClick={() => this.handleAdd()}>+</button> */}

          <button  onClick={() => this.handleSub()}>-</button>
          <span>{count}</span>
          <button  onClick={() => this.handleAdd()}>+</button>
        </div>

        <div>总价： {price * count}</div>


        <Swiper>
            {
              urls.map((v, i) => {
                return <Swiper.Item key={i}>
                  <img src={v} alt="" />
                </Swiper.Item>
              })
            }
        </Swiper>
      </div>
    );
  }

  // 方案三：
  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextState)
    if(nextState.count > 5) {
      this.setState({
        count: 5
      })
      return false
    }
    if(nextState.count < 1) {
      this.setState({
        count: 1
      })
      return false
    }

    return true
  }
}

export default App1;
